<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- form(表单)：作用：用来收集客户端的数据 并把数据发往后台程序进行处理 
      action: 后台处理程序的url
      method: 表单提交的方式  目前浏览器只认识 get 和 post
      rest编程：  get： 查询资源
                 post:  添加资源
                 put: 修改资源
                 delete: 删除资源  

     注意： 一个页面可以有多个表单,但是一个 表单不能嵌套另一个表单

    -->
      <form action="test.html" method="POST">
        <!-- 辅助标签  label：标签 -->
        <label>用户名</label>
        <!-- 单行文本框   name:后台通过name属性来获取对应输入框的值
          input: 表单输入控件  
          type： 表单输入的类型  
                html4有10种  (必须掌握)
                    text:  单行文本框
                    password: 密码框
                    radio: 单选框
                    checkbox: 复选框
                    file: 文件控件
                    button: 按钮
                    submit: 提交按钮
                    reset: 重置按钮
                    hidden: 隐藏表单域
                    image: 带图片的提交按钮
                html5:新增了7个  
        
        -->
        <!-- 
          value中的值 就是发送给后台的值（也可以作为默认是显示）
           value: 很少写上默认值
       maxlength；表示该输入框的最大输入值，用来限制输入的长度很有用
    placeholder:占位符 
         -->
        <input type="text" name="userName" placeholder="请输入用户名" maxlength="6"  >
        <br/>
        <label>密码</label>
        <!-- 密码 -->
        <input type="password" name="pwd" placeholder="请输入密码" maxlength="6">
        <br/>
        <!-- 单选框  要记得分组 才能进行单选
        checked :表示默认被选中
        --> 
         <label>性别</label>
         <input type="radio"  name="gender" id="nan" checked> 
         <!-- 辅助标签 -->
         <label for="nan">男</label>
         <input type="radio" name="gender" id="nv" > 
         <label for="nv">女</label>
         <br> <br>
         <!-- 复选框
         checked 默认被选中
        -->
         <label>爱好</label>
        <input type="checkbox" name="hobby" checked="checked" id="sport"> 
        <label for="sport">运动</label>
        <input type="checkbox" name="hobby" checked id="music"> 
        <label for="music">音乐</label>
        <input type="checkbox" name="hobby" id="movie"> 
        <label for="movie">电影</label>
        <input type="checkbox" name="hobby" id="travel"> 
        <label for="travel">旅行</label>
        <hr/>
        <!-- 文件控件 
          当表单中有文件需要上传时。必须要表单的编码为二进制的方式
          enctype="multipart/form-data"  
        -->
        <input type="file" name="fileName">
        <hr/>
        <!--按钮 -->
        <input type="button" value="我是一个普通的按钮">
        <!-- 推荐使用另外一个按钮的写法 
          注意： 使用它的时候要小心
          button：标签默认是提交按钮（使用时 一定记得把类型给加上）
        -->
        <button  type="button">我也是一个普通的按钮</button>
        <button  type="submit">我是提交按钮</button>
        <button type="reset">我是重置按钮</button>
          <hr>
        <!--隐藏表单域  作用把传到后台的数据进行隐藏，但是它不安全，不建议适应 -->
         <input type="hidden" name="realName" value="j180">
        <!-- 提交按钮 -->
        <input type=submit value="提交">
        <!-- 带图片的提交按钮 不推荐使用 -->
        <input type="image" src="images/baidu.png" width="100px" height="60px" alt="百度一下">
          <!-- 重置按钮 必须要放到表单form标签中才有用 -->
          <input type=reset value="重置按钮">
      </form>
      

      <!--一个页面可以写多个表单 -->
      <form action="">


      </form>

    
</body>
</html>